<template>
  <div class="main-context">
    <t-table
      row-key="id"
      :data="data"
      :columns="columns"
      :bordered="true"
      hover
      :pagination="pagination"
      show-header
      cell-empty-content="-"
      :loading="loading"
    >
      <template #title-slot-name>
        <div style="display: flex; justify-content: space-between; align-items: center">
          操作
          <t-button size="small" @click="$router.push(`roleEdit`)">新增</t-button>
        </div>
      </template>
      <template #operation="{ row }">
        <t-button variant="text" theme="warning" size="small" @click="$router.push(`roleEdit?id=${row.id}&isLook=1`)"><t-icon name="info-circle-filled"></t-icon></t-button>
        <t-button variant="text" theme="warning" size="small" @click="$router.push(`roleEdit?id=${row.id}`)"><t-icon name="edit-1"></t-icon></t-button>
        <t-popconfirm content="确认删除吗" @confirm="remove(row.id)">
          <t-button variant="text" theme="danger" size="small"><t-icon name="delete"></t-icon></t-button>
        </t-popconfirm>
      </template>
    </t-table>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { getRoleList, roleRemove } from '@/api/role'
import { MessagePlugin } from 'tdesign-vue-next'
import { usePageOption } from '../../hook'
const { pageOpt, pagination } = usePageOption(reqRoleList)

// 获取列表数据
const loading = ref(false)
const data = ref([])
function reqRoleList () {
  loading.value = true
  getRoleList(pageOpt).then(res => {
    pagination.total = res.total
    data.value = res.data
    loading.value = false
  })
}
reqRoleList()
// 表格头部和单元格配置
const columns = ref([
  { colKey: 'name', title: '角色名', width: '200' },
  { colKey: 'desc', title: '描述', minWidth: 200, width: 260 },
  {
    colKey: 'permissions',
    title: '权限',
    ellipsis: true,
    cell: (h, { row }) => {
      return row.permissions.join()
    }
  },
  { colKey: 'createTime', title: '创建时间', width: 180 },
  { colKey: 'operation', title: 'title-slot-name', width: 130 }
])
// 删除角色
function remove (id) {
  roleRemove({ id }).then(res => {
    reqRoleList()
    MessagePlugin.success({
      content: '删除成功',
      duration: 2000
    })
  }).catch(err => {
    MessagePlugin.error(err.msg)
  })
}

</script>
<script>
export default {
  activated () {
    this.$forceUpdate()
  }
}
</script>
<style scoped>
</style>
